<template>
    <div>
        <el-button @click="dialogFormVisibleAdd = true">添加菜单</el-button>
        <el-dialog title="添加菜单" :visible.sync="dialogFormVisibleAdd" width="60%">
            <menu-add ref="menuAdd" :menuType="menuType" v-if="dialogFormVisibleAdd"></menu-add>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改菜单" :visible.sync="dialogFormVisibleEdit" width="60%">
            <menu-edit ref="menuEdit" :Id="Id" :menuType="menuType" v-if="dialogFormVisibleEdit"></menu-edit>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="添加子菜单" :visible.sync="dialogFormVisibleAddsubmenu" width="60%">
            <sub-menu-add ref="subMenuAdd" :Id="Id" :menuType="menuType" v-if="dialogFormVisibleAddsubmenu"></sub-menu-add>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleAddsubmenu = false">取 消</el-button>
                <el-button type="primary" @click="saveAddsubmenu">确 定</el-button>
            </div>
        </el-dialog>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="menuName" label="菜单名称" sortable width="180">
            </el-table-column>
            <el-table-column prop="menuType" label="菜单类型" sortable width="180">
                <template slot-scope="scope">
                    {{ test(scope) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="Editmenu(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="Deletemenu(scope.row.id)">删除</el-button>
                    <el-button size="mini" @click="Addsubmenu(scope.row.id)">添加子菜单</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import MenuAdd from './Add.vue'
import { List } from '@/api/menu'
import MenuEdit from './Edit.vue'
import { Delete } from '@/api/menu'
import subMenuAdd from './AddSub.vue'
export default {
    components: {
        MenuAdd,
        MenuEdit,
        subMenuAdd
    },
    data() {
        return {
            tableData: [],
            menuType: [{
                id: 1,
                name: "目录"
            },
            {
                id: 2,
                name: "菜单"
            },
            {
                id: 3,
                name: "按钮"
            }],
            dialogFormVisibleAdd: false,
            dialogFormVisibleEdit: false,
            dialogFormVisibleAddsubmenu: false,
            Id: 0,
        }
    },
    methods: {
        Addsubmenu(Id) {
            this.dialogFormVisibleAddsubmenu = true;
            this.Id = Id;
            console.log(this.Id);
        },
        saveAddsubmenu() {
            this.$refs.subMenuAdd.AddsubMenu();
        },
        getmenu() {
            debugger
            List().then(res => {
                console.log("+++++");
                this.tableData = res.data;
            })
        },
        saveAdd() {
            this.$refs.menuAdd.AddMenu();
        },
        test(scope) {
            return this.menuType.find(m => m.id == scope.row.menuType).name;
        },
        Editmenu(Id) {
            this.dialogFormVisibleEdit = true;
            this.Id = Id;

        },
        saveEdit() {
            this.$refs.menuEdit.EditMenu();
        },
        Deletemenu(Id) {
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Delete(Id).then(res => {
                    if (res) {
                        this.$message.success("删除成功");

                        this.getmenu();
                        return;
                    } else {
                        this.$message.error("删除失败");
                        return;
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
    created() {
        this.getmenu();
    }
}
</script>
<style></style>